Hace unos días visitando a Iván de Zona Cerebral encontré una entrada donde habla de S3Slider un plugin para jQuery con el que podemos crear un Slideshow muy atractivo.
Antes de crear el Slideshow debo aclarar que hay scripts que suelen crear conflictos y aunque jQuery es una librería con efectos sensacionales puede que al añadirla no se obtengan los resultados esperados.
No digo con eso que jQuery sea el problema, puede ser cualquier otro scripts que tengamos, es por eso que todos los ejemplos que pongo sobre jQuery los añado en otro blog.

Para el ejemplo yo me incliné por el Slideshow que en la página del autor se muestra con la imagen grande podéis ver el ejemplo en este enlace.

Los primeros pasos a seguir que siempre recomiendo es preparar las imágenes que vamos a añadir, luego ya podemos descargar los archivos tranquilamente.
Descarga de archivos

Una vez los descargamos los alojamos en nuestro servidor (cuando digo "nuestro" servidor me refiero al que solemos usar para alojar archivos que Blogger no permite, y por supuesto un sitio donde poder alojar archivos .js)

Nos situamos en plantilla Edición de HTML y sin expandir buscamos </head> justo antes de añadimos los scripts de la siguiente forma.

<script src='aquí-url-de-archivo-jquery.js' type='text/javascript'/>
<script src='aquí-url-de-archivo-s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 3000

});
});
</script>


» En timeOut: 4000 podemos variar la velocidad para el efecto de la imagen.

Ayer comentaba sobre personalizar el scrosscol y dejé entrever que hoy el tema sería una bonita idea para incluir en él.
Esta era la idea, utilizar el crosscol para añadir un Slideshow, naturalmente no es la idea más maravillosa del mundo ni descubrí algo nuevo, pero el resultado es muy atractivo.

El siguiente paso es añadir el código html donde incluiremos las imágenes, lo haremos en un gadgets escogiendo HTML/Javascript ¿Y el lugar? eso depende donde vayamos a añadirlo, puede ser en cualquier sitio dependiendo del tamaño de las imágenes. En el ejemplo yo lo añadí en el espacio del famoso crosscol.

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="url-imagen" />
<span>aquí-texto</span>
</li>
<li class="s3sliderImage">
<img src="url-imagen" />
<span>aquí-texto</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

» Si queremos más de dos imágenes añadimos
<li class="s3sliderImage">
<img src="url-imagen" />
<span>aquí-texto</span>
</li>
tantas veces como imágenes deseamos incorporar.

» Iván tuvo la genial idea de aplicar un enlace a cada imagen si deseamos que así sea en lugar de
<img src="url-imagen" />
pondríamos:
<a href="url-enlace"><img src="url-imagen"></a>

Ya sólo queda el último paso, añadir los estilos y nos vamos a plantilla otra vez para situarnos justo antes de ]]></b:skin>

/* s3slider
----------------------------------------------- */
#s3slider {
width: 720px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 720px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
padding: 0px;
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 15px/20px Arial, Helvetica, sans-serif;
padding: 30px 13px;
width: 720px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;
/*
En esta última línea si ponemos
top: 0; -> la caja de texto se mostrará en la parte superior
si ponemos
bottom: 0; -> la caja de texto se mostrará en la parte inferior
*/
}

.clear {
clear: both;
}

» En este último código modificaremos las medidas, en s3slider y s3sliderContent hay que añadir las mismas medidas que tienen nuestras imágenes.
» En width ponemos el ancho de nuestra imagen. Y en height será el alto.
» En "s3sliderImage span" nos encontramos con background-color: #000; eso será el color del cuadro de texto.
» Una línea antes, donde width: 720px; es el ancho que tendrá el cuadro de texto.


aleXV14

Buena información, seguro que le encuentro alguna utilidad. Gracias gema ;)

Responder
Ivan Rodriguez

Gem@ no podemos dejar de invitarte a una nueva idea que hemos tenido junto a unos amigos:

Blogs con EÑE

Bueno, te invito a ti y a todos tus lectores!!

Un saludo!!

Responder
Gem@

Gracias por el comentario Alejandro :)

yz Allá vamos TwitterBoy :)

Responder
Anónimo

Hola Gema! Muchas gracias por la mención y un gran artículo, esa sería una buena sección donde añadir la galería.

Un saludo ;)

Responder
Gem@

No tienes que dármelas Iván me lo pasé estupendo creando esta entrada ;)

Responder
PIRI

mi gozo en un pozo
pero mas tranquila, sosegada y conformada
lo del blog arreglado
pero lo de las fotos, nada de nada
me la copie para no ir poniendola cada v ez que ponia una foto
hice pruebas en un blog que tengo para pruebas, funcionaba(unas veces, si otras no) pero creo que tiro la toalla
me pongo a 100
te intento mandar e.mail pero no me deja
besos guapa

Responder
Gem@

Piri, no es necesario que cada vez copies ese código...
Es suficiente con subir la imagen y eliminar el código sobrante para que no salga el enlace a la imagen grande.
Sobre el mail no sé que puede ser sigo recibiendo sin problemas :O

Responder
El errante

gema al pegar la segunda parte del código debajo de body, no se puede guardar los cambios porque me indica que está mal formada y me he asegurado que está bien
¿qué puede ser?

Responder
El errante

Y te añado que lo acabo de probar en un blog de pruebas sin ningún script "instalado" y sale el mismo error :(

Responder
Anónimo

Bueno, ya parece que lo solucioné .. ¿pero me puedes decir alguna forma de incluir las imágenes sin que sea en forma "lista"?

Es que aparece el símbolo de cuando haces una lista .. y para estas imagenes no queda bien ..

http://pruebascoti2.blogspot.com/

grass de antemano

fdo: orion

Responder
El errante

Gema .. lo intenté pero persiste la cosa..

creo que es por añadir en el código la etiqueta li, porque entonces aparece la estrella como si fuese una lista ..
mi pregunta es si se puede añadir el código sin que sea como una lista o si se puede quitar la dichosa estrellita jeje

grass de antemano

Responder
Gem@

Hola Orion, si eliminamos la imagen de la estrella entonces desaparecerá también del listado que tienes en la sidebar.
Haremos lo que en un principio había pensado y me sugerías pero quise probar co nlas medidas para que no tuvieras que modificar demasiado.
Lo que haremos será sustituir "li" por "div" de esa forma añadimos un bloque a cada enlace.
En lugar de:
<li class="s3sliderImage">
<img src="url-imagen" />
<span>aquí-texto</span>
</li>

ponemos:
<div class="s3sliderImage">
<a href="aquiimagen"/></a>
<span>aqui-texto</span></div>
Ya me dices el resultado :)

Responder
Anónimo

Bueno, eres una Diosa xD
Solucionado, grass !! :D

Fdo: Orion

Responder
Gem@

¡Que bueno!! :)

Responder
Liryme

Hola gema!
te hago una consulta: como hago si no tengo donde hostear el js?
desde ya muchas gracias!

Responder
Lina Z. Chaves.

Me da error ...:(

Responder
Gem@

Liryme yo uso Sky Drive y me va bien :)

yz Arcoiris ¿error de...?

Responder
Petterjuice

hola gema del mismo modo en q orion tubo ese problema con el codigo debajo de body ahora lo tengo yo :(
corrobore varias veces todos mis pasas hechos y esta todo al pie de la letra como se podra solucionar ese problema?

Responder
Gem@

Añádelo justo después de los otros scripts Petterjuice

Responder
Petterjuice

gema me tira este error...
ya estoy a apunto de darme x vencido =(

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Open quote is expected for attribute "{1}" associated with an element type "type".

Responder
Gem@

Necesito verlo online para saber donde está el error Petterjuice.

Responder
Anónimo

A mi me da el mismo error y no tengo ningún script añadido anteriormente.

me puedes ayudar?

www.cimasyvalles.blogspot.com

Responder
Gem@

He cambiado un par de cosas en la entrada.
El script que trabaja la velocidad del efecto se añade justo depués de los anteriores, es decir antes de </head>
También repasé las comillas y al parecer había un error al convertir el código para mostrarlo.
Ahora todo está bien incluso probé con el tuyo anónimo y va perfecto :)

Responder
Anónimo

distinguida Gema, vengo viendo tu blog desde hace tiempo y es primera vez que te escribo un comentario...(me da pena decirlo) pero bueno, comentando sobre este efecto, sencillamente es genial, lo probé y me funciono a la perfeccion, sin embargo me surge una duda. ¿puedo aplicar mas de uno de estos efectos al blog?
bueno eso...
se despide: Arcannus...

Responder
Gem@

No te de pena Arcannus el tiempo transcurre demasiado rápido y siempre buscamos algo en concreto aunque luego terminamos en lo que menos andamos buscando.
Sobre añadir más de un slider no he probado pero creo que si se puede hacer, habría que cambiar los nombres id porque deben ser únicos y añadir a las clases el mismo nombre.
Puede ser cambiar sólo una letra o incluso añadírsela.
s4slider
sslider
cualquier variante es buena ;)

Responder
KAT

Hola Gema, la verdad q esto me estresa :-|, lo vuelvo a hacer y sólo me sale un espacio en blanco, no se visualizan las imágenes, no sé bien q estoy haciendo mal :O, aloje el JS en filefactory aparentemente está bien, podrás echarle un vistazo y darme una mano?? :S gracias anticipadas. Saludos.

Responder
Gem@

yz KAT no te funciona porque estás enlazando la página donde alojas el script y debe enlazar el archivo ,es decir la url del script.

Responder
KAT

Gracias Gema, estoy buscándole una solución, saludos.

Responder
Gem@

yz Es muy sencillo en la mayoría de casos puedes conseguir la url del archivo poniendo el ratón encima del archivo luego botón derecho/propiedades/propiedades de enlace/dirección :)

Responder
Unknown

Hola Gem@,

Sin duda un excelente artículo, gracias por su dedicación altruista.

Pero le slider em mi blog sólo funciona en Firefox, y no encontrar dónde está el error. ¿Tienes algún consejo para mí, para que el slider trabaja también en otros navegadores?

http://www.diaexotico.com/

Muchas Gracias :)

Responder
Gem@

yz Sañudos Alexandre las diferencias entre navegadores es muy complicado solucionar tanto que se trata más bien de tener suerte, así que por intentarlo no se pierde nada. Añade antes de </head> lo siguiente.
En ocasiones ayuda a solucionar los problemas con Explorer.

<!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script> <![endif]-->

Espero se solucione ;)

Responder
Alfred

Hola Gema, en primer lugar gracias por la info, mira que llevo dando vueltas con el tema de los slides, y tu post es de los más aclaradores sobre el tema. Me será muy útil

Un par de dudas:

¿Admitirá slide de otros contenidos no jpg? por ejemplo algún swf?

¿Sabes si existe algún slide que, en lugar de tener que listar en el html la url de imagen, link... lea/muestre automàticamente el contenido de una carpeta -imagenes- del servidor?... ¿Quizás alguna aplicación?

Gracias de nuevo =)

Responder
gaby

Hola gema, hay alguna posibilidad que el contenido se refresque automaticamente con algun codigo? muchas gracias.

Responder
Gaby

Te amplio mi pregunta, en mi sitio lo utilizaria para noticias, lo que quiero lograr es que si las noticias las voy cambiando cada x minutos no sea necesario para el navegante tener que actualizar toda la pagina para ver las nuevas. Gracias.

Responder
Gem@

yz Gaby el contenido se refresca cada vez que actualizamos la página como bien dices. Si nos encontramos visualizando una página y hacemos algún cambio como añadir noticias nuevas veremos esos cambios nada más guardarlos, pero las vistas deberán actualizar la página para ver esos cambios, :(

yz Alfred no he visto ninngún silide que permita mostrar los archivos de una carpeta, hasta donde yo sé los archivos se muestran indicando la url de cada archivo. Archivos swf es posible añadirlos pero no puedo indicarte un slide en concreto,puede que con Jquery pero no estoy segura :(

Responder
Gaby

Gracias Gema por tu pronta respuesta, lastima que no se pueda tenia la esperanza de que eso me solucione algo que lo tengo pendiente hace tiempo, entonces no hay manera de refrescar un elemento de pagina sin que no sea con la actualizacion general de la web? pense que si. Gracias!

Responder
Gem@

yz Hasta donde yo se no Gaby, no digo que no haya alguna forma pero no sabría decirte como hacerlo porque no lo he visto.

Si lo has visto en alguna parte nos serviría de ayuda.

Responder
alfred

Hola Gemma, gracias por tu respuesta. Después de probar unos cuantos, me quedé, siempre eligiendo lo más simple para cada necesidad específica:

Innerfade: para slide simple de imagen con links
Tinyslideshow: para slide con imagen, título, descripción, link y botones de avance

Y para algo más complicadete, que permita en el slide flash y video me gustaría probar la e2_photo_gallery (que muestra el contenido de una carpeta)
i SlideShowProDirector... que tiene tela pero quizás estaría bien si hay varios editores de una web, slides diferentes, vídeo...

Saludos y gracias de nuevo =)

Responder
Gem@

yz Saludos Alfred lo interesante de todo es que has podido escoger lo que más se acerca a tus necesidades, tomaste la mejor decisión "lo más simple para cada necesidad específica" porque complicarse la vida no quiere decir obtener mejores resultados :D
Gracias a ti por comentar.

Responder
alfred

Hola Gemma de nuevo =)

Te comento para si puede seros útil, a ti a los demás que llegan a tu blog ;)

Encontré por fin otro slide que me hacia falta!

(Sin complicarse la vida con el SlideShowProdirector ni el e2_photo_gallery, que menuda tela)

Éste (http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/)permite swf -lo he probado y ok- además de jpg (así puedo poner vídeos -con preview para no cargar de peso- y reproducir ahí mismo). Con thumbs, rota automáticamente y puedes hacer que se pare cuando eliges un thumbnail. Además hiperfácil de modificar -si yo he podido...-.

Saludoos =)

Responder
Gem@

yz Gracias Alfred :)
Debo decirte que te ha quedado la web de lujo, sin embargo al acceder se abre una ventana emergente de publicidad sobre cursos, creo que es del contador de Motigo te lo digo por si no te has dado cuenta.

Responder
Ayzel-Ibz

Gema....me estoy nockeando la cabeza...itento colocarlo en la cabecera, es decir en el header como hago?

Responder
Gem@

yz Hola Lili no sé para de qué blog estamos hablando veo que tienes varios, pero si lo que deseas es añadirlo antes o después del header puedes hacerlo en un gadget de html.
Si la idea es dejarlo en el header y suprimir la cabecera puedes probar de igual forma y luego en los estilos de header-wrapper añades display:none.
Algo así:
#header-wrapper{
display:none;
aquí más estilos
----------------
----------------
}

(Haz copia de la plantilla antes de realizar los cambios)

Responder
WIÑAYPAQ

Hola, a mi tampoco me sale T_T tengo el script alojado en http://pmsc.free.fr

Quiero colocarlo encima de las entradas, pero solo sale un espacio en blanco.

http://prodwin.blogspot.com/

Como podrás ver, ni el buscado ni la barra de navegación me sale T_T

¡HELP MEEE!

Responder
Gem@

:: Producciones Wiñaypaq en la plantilla añadiste dos veces el mismo script de jQuery
Si te das cuenta dice que hay que añadir el de jQuery y 3Slider.js mira si fuera eso ;)

Responder
WIÑAYPAQ

Gracias Gem@, ahora sale. Perooooo aparece un puntito negro en la parte inferior-izquiera y el marco negro (fondo del texto) se ubica muy abajo y no al filo de la imágen :( Es normal?

Responder
Gem@

:: Prodwin veamos, si vas a dejar e lslider sobre las entradas el menú deberías ponerlo en un gadget acondicionado para el crosscol.
El slider dejarlo en ese otro gadget de main sobre las entradas, cada uno tiene su espacio.
El problema de ese puntito lo puedes solucionar siguiendo los pasos que le doy a Orion en el comentario 12.
El otro tema que se ubica muy abajo y no al filo de la imagen no lo aprecio, yo lo veo igual que en mi ejemplo :O

Responder
WIÑAYPAQ

Hola nuevamente Gem@, solucioné el problema del puntito. Pero, aunque no lo hayas notado, tengo el problema del marco negro que no se ubica al filo de la imagén.

Puedes notarlo en el sgte. enlace.

http://i476.photobucket.com/albums/rr128/Liybergzx/muestraa.jpg

Y quería saber también si se puede colocar en la descripción letras de distintos colores.

O sea, que el título sea de un tipo de color y fuente y la descripción distinta a esta. Lo he visto en otras slides distintas a esta.

Saludos.

Responder
WIÑAYPAQ

Haaaa... me olvidaba, la entrada de la descripción es muy burda, quisiera que su aparición sea más suave. Cómo lo logro?

Responder
WIÑAYPAQ

Respecto al "filo de la imágen", observé que en internet explorer anda bien :S no se vcaleeee :'(

Pero el ingreso en ambos navegadores (IE y Firefox) es muy burda.

Responder
Gem@

:: Prodwin no estoy muy segura, pero esa imagen que dices no la veo no con Explorer ni Firefox, mira si tienes el navegador actualizado.
De todas formas da la sensación de ser el fondo del blog.
El gadget del menú y el del slider los tienes en el crosscol, prueba a añadir el slider en un gadget sobre el main y vamos si esa imagen ya no la ves.
Para que el efecto del texto sea más suave digo en la entrada que "En timeOut: 4000 podemos variar la velocidad para el efecto de la imagen."

Responder
Rafael

Hola Gema, Ante todo agradecerte la labor que haces de ayuda a todo el que si inicia en la labor de hacer un blog.
He probado y creo haberlo hecho todo bien y sin embargo en mi blog no aparece el slide, llevo todo el día intentando poner uno y ya estoy desesperado pues no logro hacerlo funcionar.
Necesito ayuda.
Puedo enviarte la plantilla para que me digas que sucede?.
Gracias.
Rafael.

Responder
Gem@

:: Hola Rafael mejor dime donde está añadido porque puede que el error no sea complicado de solucionar.

Responder
Rafael

Hola Gema:
Está en: http://rlsemperfidelis.blogspot.com/
También ha probado este Slide:
http://www.cooltricksntips.com/2009/06/adding-jquery-posts-slider-to-blogger.html. Pero sin resultado satisfactorio.
Aprovecho para consultarte si sería posible
implementar en blogger este efecto de carga de página:http://www.cooltricksntips.com/2009/06/adding-jquery-posts-slider-to-blogger.html.
Gracias de antemano.
Un saludo.

Responder
Gem@

:: Rafael he probado con los archivos que estás usando y no he tenido problema en hacer trabajar el slide, pienso que al trabajar con jQuery y si estás usando otra librería creen conflictos entre sí.
Lo ideal sería que lo añadieras a un blog de pruebas para ver el resultado de todas formas puedes mirar también si estás usando algún script de Prototype, y Scriptaculous son incompatibles con jQuery :S
- No veo el efecto de carga de página debe ser que mi conexión va hoy rápida, ¿qué ves en concreto?

Responder
Rafael

Hola Gema:
Aquí puedes ver una demo del efecto de carga:
http://www.gayadesign.com/scripts/queryLoader/
En cuanto al posible conflicto, estoy usando:
http://humanossinsentido.blogspot.com/2009/11/pincha-y-arrastra-para-compartir-drag.html.
Es posible la incompatibilidad?,creo que tengo bien el código y sin embargo......
Me puedes recomendar otro slide con texto en las imágenes y enlaces a los post?
En cualquier caso, te estoy muy agradecido.
Muchas gracias.

Responder
Gem@

:: Pues ese script que comentas de Pizcos creo que es de jQuery ¿por qué no pruebas eso de añadirlo a un blog de pruebas? así vemos que tal funciona fuera del sitio.
Por otra parte esa carga es muy llamativa, me la apunto, la pruebo y te digo si puede hacerse aunque no veo que haya problema si no es como te comentaba antes de incompatibilidad entre librerías.

Responder
Rafael

Hola Gema:
Efectivamente, tras probar en el blog de pruebas, la incompatibilidad era con el "pincha y arrastra para compartir".
Pero ahora tengo otro problema, el slide siempre se muestra en la parte de arriba del blog a la izquierda.
Lo añado en un gatget para que aparezca justo sobre los post, pero siempre aparece en el header.
¿Sabes como puedo solucionarlo?
Gracias.

Responder
Gem@

:: En qué blog está añadido Rafael? no lo veo :0

Responder
Rafael

Hola Gema, Ya está puesto.
Puse el codigo en una barrade añadir gatgets debajo de main wraper para luego cambiarla hacia arriba y que salga el slide antes de los post.
Pero como podrás observar siempre sale arriba a la izquierda y si lo pongo en una barra de sidebar, me sale arriba a la derecha.
¿Como puedo darle la ubicación correcta?.
Un saludo y gracias.

Responder
Rafael

Hola Gema:
Lo añada a la barra de gadgets que lo añada, sigue saliendome en las esquinas de arriba del blog. ¿Hay algo en mi plantilla que impida ubicarlo correctamente? si es irremediable ¿en que parte de la plantilla tendría que insetar el código para que aparezca justo encima de los post?
http://rlsemperfidelis.blogspot.com/
Garcias.

Responder
Gem@

:: Ya lo veo, prueba añadiendo una sección nueva sobre el main
%% mira aquí

Responder
Rafael

Ya lo he hecho y añado el codigo en la sección pero sigue apareciendo el slide donde lo ves ahora

Responder
Anónimo

Exelentee Tutorial amigoo, me sirvioo 100% :)

GRACIIAS! SALUTES!

Responder
Gem@

:: ¿Aún sin solucionar Rafael?

:: Me alegra mucho David Muñoz :)

Responder
Carlos Javier

bua bua bua no me funciona entre muy ilusionado pues lo estaba buscando por muchos dias y aqui lo encontre pero no me funiona am nose que hacer al final cuando mande todo a guardar me aparecio que mi plantilla no tenia un gadget que raro deje yo ps nunka al añadir algo me aparecio eso pero lueog al final ver mi blog solo me aparece un espacio en blanco que me puede haber pasado..Gem@ ayudame porfa...:D

Responder
Gem@

:: Carlos si me dices donde está puesto compruebo donde está el error :)

Responder
Carlos Javier

hola gem@ gracias por responderme bueno coloque el slideshow debajo del buscador ahi se nota claramente que hay un espacio en blanco encima de los iconos...
mm yo ya lo probe en firefox que es el q utilizo y en internet explorer tambien pero el resultado siempre es el mismo, que no me aparece

me di la molestia de in a un cyber y entre a mi blog desde ahi y vi que si aparecía el slideshow tendra algo q ver eso...de ahi pienso que quiza el codigo este hecho solo para esa version del IE creo q esa version es el 7 pero no es la ultima
quiza me confunda con las versiones de IE pero la versión del Cyber es anterior al actual y ahi si la puedo ver..

ojala que me puedas ayudar
:D

Responder
Gem@

:: No lo veo Carlos, ni con Explorer8 ni con Firefox ¿has probado a ponerlo en otro blog?

Responder
Emmanuel

Hey Gem@, otra vez estaba tratando de usar uno de tus geniales consejos...la verdad me encanta este SLideShow porque es super vistoso.
Pero llevo horas tratando de que funcione, y no puedo :( estoy a punto de darme por vencido... Me sale solo un cuadrado vacio. Lo ponga donde lo ponga. Me hice un blog de prueba haber si el problema era mi plantilla o algo por el estilo. pero en el blog de prueba tampoco sale :S...necesito tu ayuda, quizas sepas cual es el problema...

Desde ya gracias Gem@ :)

Responder
Emmanuel

Si quieres podria mandarte mi plantilla para que veas que es lo que esta mal :S porque no entiendo que es lo que no sale

Responder
Gem@

:: Hola Emmanuel el problema son los scripts que en lugar de añadir un enlace directo añadiste el enlace a la página donde se encuentran, por otra parte tienes repetido el contenido del gadget donde incluimos las imágenes, en uno hay imágenes y en otro no, prueba lo referente a la url de los scripts y elimina el gadget que no tiene imágenes, con una vez que lo añadas es suficiente :)

Responder
Emmanuel

Entiendo todo menos lo de el enlace :S Es decir, lo aloje en Filefactory, y lo que hago es copiar el link que me brinda la pagina al subirlo. Quiero decir, cual seria el enlace directo? Como lo encuentro?

Gracias Gem@ por tu gran ayuda!

Responder
Emmanuel

Estos son los enlaces:

el 1ro: http://www.filefactory.com/file/b0hgc9d/n/jquery.js

el 2do: http://www.filefactory.com/file/b0hgcd2/n/s3Slider.js

Responder
Gem@

:: Emmanuel para obtener el enlace directo pienso que debes acceder con tu cuenta de usuario, una vez allí y en la mayoría de casos si sitúas el ratón sobre el archivo, pulsas el botón derecho y luego copiar proporciona la url directa del archivo. Al menos en Google Sites funciona así.

Responder
Administrador

Hola gema tengo problema hise todo segun el posto no me tira erro pero no me aparese... que sera porfa ayuda... www.losdelrojo.com

Responder
Administrador

hola gema me di el trabajo de leer los 75 post... algo sake pero aparesio la imagen (algo bueno), pero no hace el efecto de pasar las imagenes respondeme porfavor llevo meses buscando un slide para mi web, porfavor necesito ayuda... solo me parese la imagen (1) no da el efecto... estare atento a tu respuesta.

Responder
Gem@

:: UT he repasado tu plantilla y veo que los scrits están ahí así como los estilos, pero el gadget no lo veo :S

Responder
Administrador

si lo coloque arriba de mis entradas... o cuando tu los repasaste ya la habia sacado, porke no me funciono!!! solo aparese una imagen sin efecto ni nada
gracias por responder pero sigo con el problema

Responder
Administrador

http://h1.ripway.com/losdelrojo/s3Slider.js

en esa plataforma subi los jquery los dos aki te envio uno solo nomas... segun yo todo bien incluso cambie li por div y nada en los gadget

Responder
RojoWeb

Hola Gema.

Yo trabajo con UT en www.losdelrojo.com mira trate de colocar el Slide y trabaje al pie de la letra (o eso es lo que creo) con el tutorial que enseñaste, pero hago todo y cuando ingreso a la web el slide no se ve... solo queda el espacio en blanco donde supuestamente deberia salir el slide. En donde esta el Error? Ayudame revisa si encuentras el error en www.losdelrojo.com

Yo quiero que el slide aparezca arriba de las entradas pero no sale, lo raro es que cuando voy a ELEMENTOS DE LA PAGINA en la Pestaña DISEÑO el Slide se ve, pero en la Web no.

GEMA AYUDAME :'(

Responder
Gem@

:: Lamento la demora RojoWeb pero he tenido el ordenador mal, he visitado tu sitio y veo que los estilos los tienes repetidos, los scripts están bien y el gadget no está.
Puede que el problema se deba a los estilos ya que hay que añadirlos una vez.

Responder
Carlos Javier

hacia tiempo yo te comente que esto no me salía y me di por vencido y lo deje...porque no lo podía ver...
ahora que he creado otro blog se me vino la idea de colocar este slide, claro estaba que yo no estaba con la certeza de que esto funcionaría, pero asi es me funcionó..!!!!

porqué en algunas plantillas si funciona y en otras no eh..?

saludos gem@

Responder
Gem@

:: No tengo respuesta para eso Carlos Javier, todas las plantillas no son iguales y si hablamos de plantillas adaptadas más diferencias hay todavía.

Responder
Cárpena Creativos

Hola Gem@, es primera vez q te escribo, hace un par de meses entre con fuerza a esto de los blogs y te conoci. Gracias por compartir toda esta info con nosotros, eres un angel.

Bueno, te cuento: cree un blog de pruebas q se llama PRUEBA SLIDER GEM@, ahi veras lo q hize y no me sale. Hospede los scripts en SKYDRIVE 2 veces, los probe con las URL q me daban, pero creo q solo son las de la pagina, esta es la direccion donde estan:

http://cid-0b793fab9820ae40.skydrive.live.com/browse.aspx/Scripts?permissionsChanged=1

por mas q le doy clik derecho copiar direccion, la q me da es algo mas larga q la primera, pero me llevan a la misma pagina y no al archivo en si.

Entre al codigo de tu pagina 100% masculino y copie tus scripts de ahi (ya q esos veo q funcionan), los puse en el blog q te digo de PRUEBA SLIDER y nada, ...

Gemita linda de mi corazón...podrias ayudarme :$

Un millon de gracias

Responder
Gem@

:: JAIME CARPENA prueba a subir los scripts en Googlesites porque SKYDRIVE cambia la url cada dos por tres, de todas formas me dices que probaste con el mio y es extraño que funciona perfectamente, dime el blog donde está añadido y vemos ese problema :)

Responder
Cárpena Creativos

gracias por responder, ok, probare con googlesites. El Blog donde hise la prueba se llama PRUEBA SLIDER GEM@, es uno de mi lista, pero por si no lo ves, esta es la direccion:

http://prueba-slider.blogspot.com/

Nota: acabo de instalar otro slider en otro blog:

http://carpenacreative2010.blogspot.com/

con las mismas fotos, pero trabaja con otro script.

Gracias Gem@,

Responder
Gem@

:: En esa url que me has dejado tienes un pequeño error que puede ser la causa de no funcionar.
La parte que añadimos en el gadget para los enlaces debe decir en la clase "s3sliderImage" y en tu plantilla dice "s3sliderimage" la i debe ser mayúscula ;)

Responder
Cárpena Creativos

Gem@, de nuevo molestando, cambie la i por I, guarde, revise y nada, volvi a ver el gadget y la I se cambio solita otra vez por i, lo hise 2 veces y siempre cambia de mayuscula a minuscula SOLITA.

Detecte otra cosa similar, en la parte:

$('#s3slider').s3Slider({

dentro del parentesis deberia decir ('#s3slider') pues asi lo vi en otros blogs tutoriales, pero al cambiarlo por comillas y guardar,y, luego, al ver q no pasaba nada y volver a ver el codigo, de nuevo las comillas se cambiaron por ('#s3slider')

Esto sucede automaticamente, sin q yo haga nada.

Sigo sin saber q puede pasar pero no logro hacerlo funcionar, gracias y disculpa por molestar.

Responder
Cárpena Creativos

Seguro q no entendiste lo q puse en el comentario anterior, no se q pasa pero yo veo una cosa y luego aparece otra.

Lo escribire con espacios para q el sistema no lo cambie:

Yo veo esto: ( & # 3 9 ; #s3slider & # 3 9;).

luego lo cambio a entrecomillado y queda asi:

('#s3slider'), grabo y vuelvo a ver y se cambio a lo q escribi antes con espacios. Eso te puse en el coment anterior pero salio todo entre comillas :S

Gracias otra vez y disculpa todo el rollo.

Responder
Gem@

:: Sigamos probando entonces, porque es raro.
Prueba de este modo:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://lh6.ggpht.com/_B8eeVT28lB4/S_B_MDhtMTI/AAAAAAAAC54/7INWXCEFjbE/620%201.jpg" />
<span>texto...</span>
</li>
<li class="s3sliderImage">
<img src="http://lh6.ggpht.com/_B8eeVT28lB4/S_B_MHhNCfI/AAAAAAAAC58/xkohR6dMLsc/620%202.jpg" />
<span>texto...</span>
</li>
<li class="s3sliderImage">
<img src="http://lh5.ggpht.com/_B8eeVT28lB4/S_B_Mo8K5-I/AAAAAAAAC6A/gOwO1s3w9ww/620%203.jpg" />
<span>texto...</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

Responder
Cárpena Creativos

Gracias Gem@, eres lo maximo, ahora ya funciono, solo me falta abrir una cuenta en Google Site y hospedar los scripts, pues ahora estoy usando los tuyos. Mira como quedo:

http://carpenacreative2010.blogspot.com/

Un millon de gracias guapa!!!!;)

Responder
Gem@

:: No tienes que abrir ninguna cuenta, GoogleSites es de Google y Blogger también, puedes acceder con tu misma cuenta de correo de Blogger y la misma contraseña ;)
https://sites.google.com/
- No podía quedar mejor :D

Responder
Administrador

hola JAIME CARPENA... UN FAVOR DONDE SACASTE ESE TEMPLATE... PORFAVOR NECESITO ALGO ASI...

Responder
RojoWeb

GEMA SABES COMO CENTRAR EL SLIDE...
En mi blog queda a la izquierda y quier saber si existe la posibilidad de centrarlo en la pagina, o eso varía según el template.

http://blog-pruebax.blogspot.com/

Responder
Gem@

:: RojoWeb añade el código de los enlaces en el gadget que hay en el espacio del crosscol.
Te dejo una url para que veas donde está:
http://gemablog-.blogspot.com/2009/02/personalizar-el-crosscol.html

Responder
Administrador

www.juvenilradal.com sabes acá no lo puedo integrar... que estara pasando

Responder
Gem@

:: JAIME CARPENA coincido con lo que dice UT es una plantilla que me gusta pero no veo los créditos ¿nos puedes indicar cómo se llama o de dónde bajarla?

Responder
Cárpena Creativos

Gem@: gracias por todo, no sabes en dos meses como he aprendido por tus excelentes tutoriales, ...y no sabia nada de nada.

UT: esa plantilla la hise yo, claro, con la ayuda de mi maestra Gem@;) contactame pues tengo otras muchisimo mejores, miralas en mi perfil. Mi correo es jacarpena@hotmail.com

Gem@, sorry por el cherry como decimos en Perú:D

Responder
Administrador

ok ya lo hise... no logro hacer que aparesca el slide... nose debe ser la plantilla... porque cuando uno quiere algo ese algo se hace tan dificil...???

Responder
Gem@

:: No es difícil UT, lo hacemos difícil que no es lo mismo porque queremos hacer cambios en una plantilla que no es original de Blogger, la plantilla que estás usando es una plantilla adaptada para Blogger y en cualquier tutorial o explicación nos basamos siempre en plantillas originales de Blogger.
En tu plantilla que es esta:
http://www.falconhive.com/2009/02/zinmag-tribune-blogger-template.html
por lo que veo ya lleva un slider y lo trae la plantilla incorporado, de todas fromas no veo ningún cambio como de haber seguido los pasos de esta entrada.
Al tratarse como te decía de una plantilla adaptada quien mejor te puede asesorar es la persona hizo la adaptación, en los créditos de tu plantilla se pueden ver:
Adaptada por AMUKI
Theme URL: http://amuki.blogspot.com
Author URL: http://amuki.sysdeco.com.ec

Responder
SMB

hola gema. Cómo hacer para que la caja de texto se muestre en el extremo derecho o izquierdo?, ya que sólo explicas arriba o abajo.

Saludos y gracias

Responder
Gem@

:: SEGMENTO cada modelo lleva unos estilos distintos que se pueden descargar de la web del autor.

Responder
Administrador

Hola GEMA, Necesito un favor, quiero implementar en mi web este s3slider, pero abajo de este en el espacio de las entradas, estas mismas entrada en miniatura como lo estan ahora, y este s3lide se podra?
me recomiendas un tutoriar para que las entradas en dos columnas...???
gracias...!!!
www.losdelrojo.com

Responder
Gem@

:: UT el slider se puede añadir en cualquier gadget de html siempre que su anchura no sea mayor que el espacio disponible da igual si es sobre las entradas o debajo.
Añadir las entradas en dos columnas es otra historia, no sé la forma de hacerlo :(

Responder
Walter

Buenos dias, felicitarte por este maravilloso blog y vengo con algunas dudas como podria hacer para hacer un slider con viñetas al costado o como en esta pagina http://www.llusantronic.net, me enamoro la idea me encanta esa plantilla...espero me puedas ayudar o derrepente agregar aqui mismo en este slide lo ultimo que falta.

Responder
Gem@

:: Saludos Walter, ese slider enlaza con entradas del blog, no escribí sobre eso pero Pizcos si tiene una entrada que puede interesarte:
http://humanossinsentido.blogspot.com/

Responder
Walter

estoy intentando hacerlo desde alli pero no explica muy bien, me gustaria que lo hagan paso por paso porq la verdad q no entiendo nada

Responder
Gem@

:: Lo ideal es probar en otro blog y siguiendo paso a paso sus indicaciones, yo creo que si lo explica paso a paso, de todas formas también hay posibilidad de preguntarle :)

Responder
Txell

Hola, acabo de implementar el S3Slider (Ejemplo 2) en la página que estoy montando y funciona correctamente. Lo único que me han pedido es que el texto símplemente aparezca sin movimiento vertical. Es posible?

http://gemablog-.blogspot.com/2009/02/s3slider-con-jquery.html

Responder
Unknown

Hola Gem@,

tengo algun problema con la dirección de los archivos .js los subo a skydrive y me da esta dirección:
http://cid-a1497f4c9e7a4e73.office.live.com/self.aspx/.Public/scrips/s3Slider.js pero creo que no es, porque el recuadro de las imágenes aparece en blanco.

Le doy a propiedades y me da la misma dirección.

Subo estos dos archivos: s3SliderPacked , y s3Slider .

¿Puedes ayudarme? Gracias!

Responder
Gem@

:: Tania Skydrive daba problemas con la url hace tiempo y por lo que se ve continúa igual, puedes probar a subirlos a https://sites.google.com/ accedes con la misma cuenta que utilizas en Blogger y la misma contraseña.
También puedes añadirlos directamente a la plantilla, es lo que siempre recomiendo para evitar problemas con alojamientos externos, mira esta entrada:
http://gemablog-.blogspot.com/2009/03/problemas-soluciones-y-alternaticas-con.html

Responder
Unknown

Gracias Gema por tu rapidez!!

Ha funcionado perfecto, ahora a modificar algunas cosillas pero lo principal está,
Un besoo!

Responder
Gem@

:: Estupendo Tania :)

Responder
Balthazar Hawke

:'( necesito ayuda Gem@

Subi los dos archivos, el s3Slider y el s3SliderPacked que vienen en el rar.

script src='aquí-url-de-archivo-jquery.js' type='text/javascript'
script src='aquí-url-de-archivo-s3Slider.js' type='text/javascript'

Cual de ellos es el jquery.js? Este: s3Slider o
este otro: s3SliderPacked?

:( Creo que al fin he encontrado algo que supera mi capacidad de razonamiento.. jquery T_T

Responder
Balthazar Hawke

T_T Subi los archivos a google sites, y copie los enlaces, pero no se si ponen asi:

https://sites.google.com/site/testzonearchive/home/archive/s3SliderPacked.js

https://sites.google.com/site/testzonearchive/home/archive/s3Slider.js

lo puse y todo, peor no logre que apareciera.

Responder
Balthazar Hawke

he encontrado una forma mas facil de poner el slide, si lo logro te aviso :D

Responder
Balthazar Hawke

No, parece que no pude... :(

Responder
Balthazar Hawke

:) ya encontre cual era el error, pense que llevaba ambos archivos el packed y el otro, pero en realidad era el archivo propio del jquery...
XD gracias! y perdon por saturar el cosito con comentarios! :$

Responder
Gem@

:: No hay problema Balthier, me alegra que por fin esté solucionado :)

Responder
kawsaqi

hola,, justo lo que estaba buscando,, una consulta ,, en mi blog de prueba el la entrada no se ajusta al alto del slider,, aparece como si estuviese flotando,,, aquí mi blog de prueba gemablog-.blogspot.com/2009/02/s3slider-con-jquery.html

espero me pueda ayudar, desde ya muchas gracias por su tiempo, dedicación y trabajo.

Gem@

Hola kawsaqi te quedó pegada la url de esta entrada no la de tu blog :S

Responder
Anónimo

Hola Gem@!
Estoy dandole una nueva apariencia a mi blog y me pareció muy útil la función del S3slider por lo que he usado tu código.
Después de unos cuantos ajustes las imágenes corrían perfectas, solo le he quitado el Span de text ya que no me interesa que haya texto.
El problema es que después de hacer ajustes de otro tipo en la plantilla, se desajustó el slider y ahora no pasan las imágenes, se queda estático!!!
Ya he estado tratando de ver si por error eliminé algo pero el código está igual!
Te dejo el borrador que estoy armando:
http://alluneediscupcakes.blogspot.com.ar/p/cupcakes.html
a ver si me puedes dar una mano para encontrar el problema!!!!
Muchas gracias =)
Maia

Gem@

Prueba añadiendo lo que has suprimido y déjalo tal cual la explicación, si no quieres que se muestre el texto eso lo eliminamos en el HTML del slider.

Anónimo

Gracias!!!! volví a añadir aquello y lo que hice fue poner la opacidad del cuadro de texto en 0 para que no se muestre!!!

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top